
import React, {Component} from 'react';
import {
    StyleSheet,
    Text,
    View,
    TouchableHighlight,
    FlatList,
    Platform,
    Alert
} from 'react-native';

import FontAwesome from 'react-native-vector-icons/FontAwesome';

import dataSource from '../data/homeListData.json';

import { searchBoxDemo } from "./searchBoxDemo";
import { imageSliderDemo } from "./imageSliderDemo";
import { squareGridDemo } from "./squareGridDemo";
import refreshListTest from '../components/RefreshList/RefreshListTest';
import normalListTest from '../components/NormalList/FlatListTest';

//
export default class homeDemo extends Component{

    constructor(props){
        super(props);

        this.state = {
            dataSource: dataSource
        }
    }

    _handleBackPress(){
        this.props.navigator.pop();
    }

    _handleNextPress(nextRoute){
        this.props.navigator.push(nextRoute);
    }

    _itemClicked(item, index){
        let component = undefined;
        switch(item.component) {
            case 'searchBoxDemo':
                component = searchBoxDemo;
                break;
            case 'imageSliderDemo':
                component = imageSliderDemo;
                break;
            case 'squareGridDemo':
                component = squareGridDemo;
                break;
            case 'refreshListTest':
                component = refreshListTest;
                break;
            case 'normalListTest':
                component = normalListTest;
                break;
        }
        console.log(component);

        let nextRoute = {
            title: item.title,
            component: component
        };


        this._handleNextPress(nextRoute);
    }

    _renderItem = ({item, index}) => (
        <TouchableHighlight
            underlayColor="#000"
            onPress={this._itemClicked.bind(this, item, index)}
            key={index}>

            <View style={{backgroundColor: '#ffffff', flex: 1, flexDirection: 'row', height: 44, alignItems: 'center'}}>
                <View style={{flex: 1, justifyContent: 'center', paddingLeft: 20, paddingRight: 20}}>
                    <Text style={{color: '#333'}}>{item.title}</Text>
                </View>
                <View style={{width: 44, height: 44, justifyContent: 'center', alignItems: 'center'}}>
                    <FontAwesome name="angle-right" size={20} color="#c7c7cc"/>
                </View>
            </View>
        </TouchableHighlight>
    );

    render(){
        const nextRoute = {
            component: home,
            title: 'Bar That',
            passProps: { myProp: 'bar' }
        };

        return (
            <View style={{backgroundColor: '#efeff4', flex: 1}}>
                <FlatList
                    data={this.state.dataSource}
                    ItemSeparatorComponent={Platform.OS !== 'android' && ((highlighted) => (<View style={[styles.separator, highlighted && {marginLeft: 0}]}/>))}
                    renderItem={this._renderItem.bind(this)}
                    style={{marginTop: 20}}
                />
            </View>
        );
    }
}

const styles = StyleSheet.create({
    separator: {
        backgroundColor: '#c8c7cc',
        height: 1
    }
});